<template>
  <div class="warehouse-detail">
    <!-- 上方容器：仓库基础资料 -->
    <div class="basic-info-container">
      <div class="section-header">
        <div class="section-title">仓库基础资料</div>
        <div class="section-actions">
          <el-button @click="editWarehouse">编辑</el-button>
          <el-button @click="deleteWarehouse">删除</el-button>
            <el-button 
                @click="toggleStatus" 
               
              >
                {{ warehouse.wh_status === 0 ? '停用' : '启用' }}
              </el-button>
          <el-button @click="lockWarehouse">
            {{ warehouse.is_lock === 0 ? '锁定' : '解锁' }}
          </el-button>
          <el-button @click="showPrintDialog">打印</el-button>
        </div>
      </div>
      <div class="divider"></div>
      
      <!-- 使用网格布局的基础资料部分 -->
      <div class="basic-info-grid">
        <div class="info-item">
          <div class="info-label">仓库编号</div>
          <div class="info-value">{{ warehouse.wh_code || '无' }}</div>
        </div>
        
        <div class="info-item">
          <div class="info-label">仓库名称</div>
          <div class="info-value">{{ warehouse.wh_name || '无' }}</div>
        </div>
        
        <div class="info-item">
          <div class="info-label">仓库容量</div>
          <div class="info-value">{{ warehouse.wh_capacity ? warehouse.wh_capacity + ' m³' : '无' }}</div>
        </div>
        
        <div class="info-item">
          <div class="info-label">仓库状态</div>
          <div class="info-value">{{ warehouse.wh_status === 0 ? '正常' : '停用' }}</div>
        </div>
        
        <div class="info-item">
          <div class="info-label">库管部门</div>
          <div class="info-value">{{ warehouse.wh_depName || '无' }}</div>
        </div>
        
        <div class="info-item">
          <div class="info-label">仓库主管</div>
          <div class="info-value">{{ warehouse.wh_userName || '无' }}</div>
        </div>
        
        <div class="info-item full-row">
          <div class="info-label">仓库地址</div>
          <div class="info-value">{{ warehouse.wh_address || '无' }}</div>
        </div>
        
        <div class="info-item">
          <div class="info-label">库位数量</div>
          <div class="info-value">{{ warehouse.wh_slot_num || '无' }}</div>
        </div>
        
        <div class="info-item">
          <div class="info-label">创建人</div>
          <div class="info-value">{{ warehouse.create_name || '无' }}</div>
        </div>
        
        <div class="info-item">
          <div class="info-label">创建时间</div>
          <div class="info-value">{{ formatDateTime(warehouse.create_time) || '无' }}</div>
        </div>
        
        <div class="info-item">
          <div class="info-label">更新人</div>
          <div class="info-value">{{ warehouse.update_name || '无' }}</div>
        </div>
        
        <div class="info-item">
          <div class="info-label">更新时间</div>
          <div class="info-value">{{ formatDateTime(warehouse.update_time) || '无' }}</div>
        </div>
      </div>
    </div>

    
    <div class="action-bar">
      <el-button @click="cancel">关闭</el-button>
    </div>


    <!-- 库位信息部分 -->
    <div class="location-table-container">
<el-card class="base-info-card">
  <template #header>
    <span class="card-header-title">库位信息 (共 {{ warehouse.wh_slot_num || 0 }} 个库位)</span>
  </template>
        
        <!-- 操作按钮区域 -->
        <div style="text-align: left; margin-bottom: 15px;">  
          <el-button @click="exportSlots" :disabled="!warehouse.wh_slot_num || slotdata.length === 0">导出</el-button>
          <el-button @click="handleBatchDisable" :disabled="selectedRows.length === 0">停用</el-button>
          <el-button @click="handleBatchEnable" :disabled="selectedRows.length === 0">启用</el-button>
        </div>
        
        <!-- 无数据提示 -->
        <el-alert
          v-if="warehouse.wh_id && (!warehouse.wh_slot_num || warehouse.wh_slot_num === 0)"
          title="当前仓库未设置库位"
          type="info"
          show-icon
          :closable="false"
          style="margin-bottom: 15px;"
        />
        <div><p></p></div>
        <div></div>
             <div class="search-container">
  <el-form :model="searchParams" class="search-form"> 
    <el-form-item label="仓位:" prop="slot_code" class="form-item">
      <el-input v-model="searchParams.slot_code" placeholder="请输入仓位名称/编号"></el-input>
    </el-form-item>
    
    <!-- 修改这里的 prop 和 v-model administrator-->
    <el-form-item label="库位名称:" prop="slot_name" class="form-item">
      <el-input v-model="searchParams.slot_name" placeholder="请输入库位名称"></el-input>
    </el-form-item>
    
    <el-form-item label="库位状态:" prop="status" class="form-item">
      <el-select v-model="searchParams.status" placeholder="请选择状态" clearable>
        <el-option label="启用" :value="0"></el-option>
        <el-option label="停用" :value="1"></el-option>
      </el-select>
    </el-form-item>
    
    <el-form-item label="库位主管:" prop="slot_userId" class="form-item">
      <el-select 
        v-model="searchParams.slot_userId" 
        placeholder="请选择库位主管"
        filterable
        clearable
      >
        <el-option 
          v-for="user in userOptions" 
          :key="user.user_id" 
          :label="user.user_name" 
          :value="user.user_id"
        >
          <span>{{ user.user_name }}</span>
          <span style="float: right; color: #8492a6; font-size: 12px">
            {{ user.user_phone }}
          </span>
        </el-option>
      </el-select>
    </el-form-item>
 
    <div class="form-actions">
      <el-button @click="resetSearch">重置</el-button>
      <el-button type="success" @click="handleSearch">查询</el-button>
    </div>
  </el-form>
</div>
<div></div>
<p></p>


        <!-- 表格 -->
       <el-table 
  :data="slotdata" 
  style="width: 100%" 
  @selection-change="SelectChange"
  :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
  v-loading="loading"
>
  <el-table-column type="selection" width="55"></el-table-column>
  <el-table-column type="index" label="序号" width="80"></el-table-column>
  <el-table-column prop="slot_code" label="库位编号" width="135"></el-table-column>
  <el-table-column prop="slot_name" label="库位名称" width="150"></el-table-column>
  <el-table-column prop="slot_capacity" label="库位容量/m³" width="120"></el-table-column>
  <el-table-column prop="slot_userName" label="仓库主管" width="150"></el-table-column>
  <el-table-column prop="slot_status" label="库位状态" width="100" :formatter="formatStatus"></el-table-column>
  <el-table-column prop="remark" label="备注" min-width="150"></el-table-column>
</el-table>

        <el-empty 
          v-if="warehouse.wh_id && warehouse.wh_slot_num > 0 && slotdata.length === 0" 
          description="暂无库位数据" 
          :image-size="100"
          style="padding: 40px 0;"
        />
        <!-- 页码 -->
        <el-pagination 
            :page-size="pagination.pageSize" 
            :pager-count="11" 
            layout="prev, pager, next, jumper" 
            :total="pagination.total"
            v-model:current-page="pagination.currentPage"
            @current-change="handlePageChange" 
            style="float:right;margin-top:20px">
        </el-pagination>
      </el-card>
    </div>
  </div>
 <!--打印模态框-->
     <el-dialog v-model="printDialogVisible" width="400">
            <div id="print-area" style="display: flex; align-items: center;">
                <div style="display: flex; flex-direction: column; align-items: center; margin-right: 20px;">
                    <QrcodeVue :value="warehouse.wh_code" :size="100" />
                    <span style="color: red; margin-top: 8px;">{{ warehouse.wh_code }}</span>
                </div>
                    <table border="1" style="border-collapse: collapse; width: 220px;">
                        <thead>
                            <tr>
                                <td>仓库名称</td>
                                <td>{{ warehouse.wh_name }}</td>
                            </tr>
                            <tr>
                                <td>仓库容量m3</td>
                                <td>{{ warehouse.wh_capacity }}</td>
                            </tr>
                            <tr>
                                <td>仓库地址</td>
                                <td>{{ warehouse.wh_address }}</td>
                            </tr>
                        </thead>
                    </table>
            </div>
            <template #footer>
                <el-button class="no-print" @click="printDialogVisible = false">取消</el-button>
                <el-button class="no-print" type="primary" @click="handlePrint">打印</el-button>
            </template>
    </el-dialog>

</template>

<script>
import { ref, reactive, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import http from '../auth/index'; 
import { ElMessage, ElMessageBox } from 'element-plus';
import * as XLSX from 'xlsx';

export default {
  setup() {
    const route = useRoute();
    const router = useRouter();
    const id = ref(route.query ? route.query.id || null : null);
        // 从路由参数中获取仓库ID
    const warehouseId = ref(route.query.id || null);
        const loading = ref(false); // 添加loading状态
    const slotFormRef = ref(null); // 添加表单引用
    
    // 仓库详情数据
    const warehouse = ref({
      wh_id: '',
      wh_code: '',
      wh_name: '',
      wh_address: '',
      wh_sort: null,
      wh_status: 0,
      wh_capacity: null,
      wh_userId: null,
      wh_userName: '',
      wh_depId: null,
      wh_depName: '',
      wh_userPhone: '',
      is_default: 0,
      is_lock: 0,
      create_name: '',
      create_time: '',
      update_name: '',
      update_time: '',
      is_delete: '',
      wh_slot_num: 0,
      remark: '',
    });

    //#region 打印
        const printDialogVisible = ref(false);
        function showPrintDialog() {
            printDialogVisible.value = true;
        }
        function handlePrint() {
            window.print();
        }

    // 库位数据
    const slotdata = ref([]);
    const userOptions = ref([]);
    const selectedRows = ref([]);
    
    // 分页配置
    const pagination = reactive({
      currentPage: 1,
      pageSize: 10,
      total: 0
    });

    // 抽屉相关状态
    const drawer = ref(false);
    const drawerTitle = ref('添加库位');
    const isEditMode = ref(false);
    const currentSlot = reactive({
      slot_id: null,
      slot_code: '',
      slot_name: '',
      slot_capacity: null,
      slot_userId: null,
      slot_status: 0,
      slot_sort: null,
      remark: ''
    });

    // 表单验证规则
    const slotRules = reactive({
      slot_name: [{ required: true, message: '请输入库位名称', trigger: 'blur' }],
      slot_userId: [{ required: true, message: '请选择库位主管', trigger: 'change' }],
      slot_capacity: [{ required: true, message: '请输入库位容量', trigger: 'blur' }],
      slot_sort: [{ required: true, message: '请输入排序号', trigger: 'blur' }]
    });

    // 删除对话框
    const deleteDialogVisible = ref(false);
    const deletingSlotId = ref(null);

    // 格式化日期
    const formatDateTime = (date) => {
      if (!date) return '';
      const d = new Date(date);
      const year = d.getFullYear();
      const month = String(d.getMonth() + 1).padStart(2, '0');
      const day = String(d.getDate()).padStart(2, '0');
      const hours = String(d.getHours()).padStart(2, '0');
      const minutes = String(d.getMinutes()).padStart(2, '0');
      const seconds = String(d.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    };

    // 格式化状态
    const formatStatus = (row) => {
      return row.slot_status === 0 ? '启用' : '停用';
    };

   // 获取仓库详情
const getWarehouseDetails = async () => {
  try {
    loading.value = true;
    const res = await http.get("/Warehouse/GetIdWarehouse", {
      params: { id: id.value }
    });
    
    if (res.data) {
      Object.assign(warehouse.value, {
        ...res.data,
        wh_slot_num: res.data.wh_slot_num || 0
      });
      
      // 确保获取到仓库详情后再获取库位数据
      if (warehouse.value.wh_id) {
        pagination.currentPage = 1;
        await fetchSlots(); // 确保这里使用await
      }
    }
  } catch (err) {
    console.error('获取仓库详情失败:', err);
    ElMessage.error('数据加载失败');
  } finally {
    loading.value = false;
  }
};

    // 获取库位数据
// 获取库位数据
// 修改后的 fetchSlots 方法
const fetchSlots = async () => {
  try {
    if (!warehouse.value.wh_id) return;

    loading.value = true;
    const params = {
      pageSize: Math.max(pagination.pageSize, 1),
      currentPage: Math.max(pagination.currentPage, 1),
      warehouseId: warehouse.value.wh_id,
      code: searchParams.slot_code?.trim(),
      name: searchParams.slot_name?.trim(),
      status: searchParams.status,
      userName: searchParams.slot_userId 
        ? userOptions.value.find(u => u.user_id === searchParams.slot_userId)?.user_name 
        : undefined
    };

    console.log('请求参数:', params);
    const response = await http.get("/Slot/GetSlots", { params });
    console.log('响应数据:', response.data);

    if (response.data?.code === 200 && response.data.data) {
      const result = response.data.data;
      slotdata.value = (result.list || []).map(slot => ({
        ...slot,
        slot_userName: slot.slot_userName || '未分配'
      }));
      pagination.total = result.rows || 0;
    } else {
      throw new Error(response.data?.message || '无效的响应格式');
    }
  } catch (error) {
    console.error('获取数据失败:', error);
    ElMessage.error(error.message);
    slotdata.value = [];
    pagination.total = 0;
  } finally {
    loading.value = false;
  }
};




const handleSizeChange = (size) => {
  pagination.pageSize = size;
  pagination.currentPage = 1; // 改变每页条数时重置到第一页
  fetchSlots();
};



    // 获取用户列表
    const fetchUsers = async () => {
      try {
        const res = await http.get('/Warehouse/GetAllUsers');
        userOptions.value = res.data.map(item => ({
          user_id: item.user_id,
          user_name: item.user_name,
          user_phone: item.user_phone || ''
        }));
      } catch (error) {
        console.error('获取用户列表失败:', error);
        ElMessage.error('获取用户列表失败');
      }
    };

   // 导出库位数据
const exportSlots = () => {
  if (!warehouse.value.wh_id) {
    ElMessage.warning('无效的仓库ID');
    return;
  }
 
  try {
    const wb = XLSX.utils.book_new();
    const excelData = slotdata.value.map(row => ({
      "仓库名称": warehouse.value.wh_name,
      "库位编号": row.slot_code,
      "库位名称": row.slot_name,
      "库位容量": row.slot_capacity,
      "仓库主管": row.slot_userName,
      "排序": row.slot_sort,
      "状态": row.slot_status === 0 ? '启用' : '停用',
      "备注": row.remark
    }));
 
    const ws = XLSX.utils.json_to_sheet(excelData);
    XLSX.utils.book_append_sheet(wb, ws, "库位信息");
    XLSX.writeFile(wb, `库位信息_${warehouse.value.wh_name}_${new Date().toISOString().slice(0,10)}.xlsx`);
  } catch (error) {
    console.error('导出失败:', error);
    ElMessage.error('导出失败');
  }
};
    // 显示编辑抽屉
    const showEditDrawer = (row) => {
      isEditMode.value = true;
      drawerTitle.value = '编辑库位';
      Object.assign(currentSlot, {
        slot_id: row.slot_id,
        slot_code: row.slot_code,
        slot_name: row.slot_name,
        slot_capacity: row.slot_capacity,
        slot_userId: row.slot_userId,
        slot_status: row.slot_status,
        slot_sort: row.slot_sort,
        remark: row.remark
      });
      drawer.value = true;
    };

    // 显示删除对话框
    const ShowDelete = (slotId) => {
      deletingSlotId.value = slotId;
      deleteDialogVisible.value = true;
    };

        const cancel = () => {
      router.go(-1);
    };



    
    // 确认删除
    const confirmDelete = async () => {
      if (!deletingSlotId.value) {
        ElMessage.error('未选择要删除的库位');
        return;
      }
      
      try {
        const res = await http.put(`/Slot/DeleteSlot?id=${deletingSlotId.value}`);
        
        if (res.data > 0) {
          ElMessage.success('删除成功');
          await fetchSlots();
          deleteDialogVisible.value = false;
          deletingSlotId.value = null;
        } else {
          ElMessage.error('删除失败');
        }
      } catch (err) {
        console.error('删除出错:', err);
        ElMessage.error('删除失败');
      }
    };
    

    // 保存库位
    const saveSlot = async () => {
      try {
        const valid = await slotFormRef.value.validate();
        if (!valid) return;

        // 获取选中的用户信息
        const selectedUser = userOptions.value.find(user => user.user_id === currentSlot.slot_userId);
        
        if (!selectedUser) {
          ElMessage.error('请选择有效的库位主管');
          return;
        }

        // 构建请求数据
        const postData = {
          ...currentSlot,
          slot_userName: selectedUser.user_name,
          warehouseId: id.value
        };

        const endpoint = isEditMode.value 
          ? '/Slot/UpdateSlot' 
          : '/Slot/AddSlot';
        const httpMethod = isEditMode.value ? 'put' : 'post';

        const submitRes = await http[httpMethod](endpoint, postData);

        if (submitRes.data > 0) {
          ElMessage.success(isEditMode.value ? '更新成功' : '添加成功');
          drawer.value = false;
          await fetchSlots();
          resetSlotForm();
        } else {
          ElMessage.error(isEditMode.value ? '更新失败' : '添加失败');
        }
      } catch (error) {
        console.error('操作出错:', error);
        ElMessage.error(isEditMode.value ? '更新失败' : '添加失败');
      }
    };

const searchParams = reactive({
  slot_code: '',
  slot_name: '', // 添加这个字段与后端name参数对应
  status: null,
  slot_userId: null
});

 
/// 重置搜索
const resetSearch = () => {
  Object.assign(searchParams, {
    slot_code: '',
    status: null,
    slot_userId: null
  });
  pagination.currentPage = 1;
  pagination.pageSize = 10; // 确保pageSize有默认值
  fetchSlots();
};
// 处理搜索
const handleSearch = () => {
  pagination.currentPage = 1; // 搜索时重置到第一页
  fetchSlots();
};

    // 重置库位表单
    const resetSlotForm = () => {
      Object.assign(currentSlot, {
        slot_id: null,
        slot_code: '',
        slot_name: '',
        slot_capacity: null,
        slot_userId: null,
        slot_status: 0,
        slot_sort: null,
        remark: ''
      });
      isEditMode.value = false;
      drawerTitle.value = '添加库位';
    };

    // 添加库位
    const handleAddSlot = () => {
      resetSlotForm();
      drawer.value = true;
    };

    // 批量停用
const handleBatchDisable = async () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请至少选择一条记录');
    return;
  }

  try {
    await ElMessageBox.confirm('确定要停用选中的库位吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    });

    const res = await http.put('/Slot/BatchUpdateStatus', {
      ids: selectedRows.value.map(row => row.slot_id),
      status: 1
    });

    if (res.data > 0) {
      ElMessage.success('批量停用成功');
      await fetchSlots();
    } else {
      ElMessage.error('批量停用失败');
    }
  } catch (err) {
    if (err !== 'cancel') {
      console.error('批量停用出错:', err);
      ElMessage.error('批量停用失败');
    }
  }
};
//批量启用
const handleBatchEnable = async () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请至少选择一条记录');
    return;
  }

  try {
    await ElMessageBox.confirm('确定要启用选中的库位吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    });

    const res = await http.put('/Slot/BatchUpdateStatus', {
      ids: selectedRows.value.map(row => row.slot_id),
      status: 0
    });

    if (res.data > 0) {
      ElMessage.success('批量启用成功');
      await fetchSlots();
    } else {
      ElMessage.error('批量启用失败');
    }
  } catch (err) {
    if (err !== 'cancel') {
      console.error('批量启用出错:', err);
      ElMessage.error('批量启用失败');
    }
  }
};



    // 详情界面的编辑按钮跳转方法（假设在详情组件中）
const editWarehouse = () => {
  router.push({ 
    path: 'warehouseupdate', 
    query: { 
      id: warehouseId.value, // 假设这是详情页的仓库ID
      from: 'detail' // 添加来源参数，表示从详情页来
    }  
  });
};
    // 在setup()中添加删除仓库方法
const deleteWarehouse = async () => {
  if (!warehouse.value.wh_id) {
    ElMessage.error('无效的仓库ID');
    return;
  }

  try {
    await ElMessageBox.confirm('确定要删除该仓库吗？删除后将无法恢复', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    });

    const res = await http.delete(`/Warehouse/DeleteWarehouse?id=${warehouse.value.wh_id}`);
    
    if (res.data > 0) {
      ElMessage.success('删除成功');
      router.push('/warehouse'); // 返回仓库列表页
    } else {
      ElMessage.error('删除失败');
    }
  } catch (err) {
    if (err !== 'cancel') {
      console.error('删除仓库出错:', err);
      ElMessage.error('删除失败');
    }
  }
};

// 修改toggleStatus方法
// 修改后的toggleStatus方法
const toggleStatus = async () => {
  if (!warehouse.value.wh_id) {
    ElMessage.error('无效的仓库ID');
    return;
  }

  try {
    loading.value = true;
    const currentStatus = warehouse.value.wh_status;
    const newStatus = currentStatus === 0 ? 1 : 0;
    
    const confirmMsg = currentStatus === 0 
      ? '确定要停用该仓库吗？停用后仓库将不可用' 
      : '确定要启用该仓库吗？';
    
    await ElMessageBox.confirm(confirmMsg, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    });

    // 使用URL参数方式调用API（与后端匹配）
    const res = await http.put(`/Warehouse/UpdateStatus?wh_id=${warehouse.value.wh_id}&wh_status=${newStatus}`);

    // 判断逻辑调整：后端返回的是影响行数（>=0表示成功）
    if (res.status === 200) {
      // 直接使用我们发送的目标状态（因为后端已按我们发送的值更新）
      warehouse.value.wh_status = newStatus;
      ElMessage.success(newStatus === 1 ? '仓库已停用' : '仓库已启用');
      await getWarehouseDetails(); // 刷新完整数据
    } else {
      throw new Error('操作失败');
    }
  } catch (err) {
    if (err !== 'cancel') {
      console.error('状态变更异常:', err);
      ElMessage.error(err.response?.data?.message || '操作失败');
      await getWarehouseDetails(); // 失败时也刷新数据
    }
  } finally {
    loading.value = false;
  }
};

    // 选中行变化时触发
    const SelectChange = (selection) => {
      selectedRows.value = selection;
    };

   // 处理分页变化
const handlePageChange = (page) => {
  pagination.currentPage = page;
  fetchSlots();
};



    // 初始化加载数据
// 初始化
onMounted(async () => {
  pagination.pageSize = 10; 
  await fetchUsers(); // 先获取用户数据
  if (id.value) {
    await getWarehouseDetails(); // 再获取仓库详情和库位数据
  }
});

    return {
      warehouse,
      showPrintDialog,
      handlePrint,
      editWarehouse,
      slotdata,
      userOptions,
      exportSlots,
      pagination,
      selectedRows,
      drawer,
      drawerTitle,
      currentSlot,
      slotRules,
      deleteDialogVisible,
      slotFormRef,
      deletingSlotId,
      handleSearch,
      handleSizeChange,
      resetSearch,
      formatDateTime,
      formatStatus,
      getWarehouseDetails,
      fetchSlots,
      searchParams,
      fetchUsers,
      showEditDrawer,
      ShowDelete,
      cancel,
      confirmDelete,
      saveSlot,
      handleAddSlot,
      handleBatchDisable,
      handleBatchEnable,
      loading,
      SelectChange,
      handlePageChange,
      printDialogVisible,
      deleteWarehouse,
      toggleStatus,
    };
  }
};
</script>

<style scoped>
.warehouse-detail {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 60px);
}

/* 基础信息卡片样式 */

/* 卡片标题左对齐样式 */
.card-header-title {
  display: block;
  text-align: left;
  width: 100%;
  font-weight: bold;
}
.basic-info-container {
  width: 80%; /* 占页面的1/3宽度 */
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  padding: 20px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  color: #1a1a1a;
}

/* 底部操作栏样式 */
.action-bar {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 210px; /* 根据你的侧边栏宽度调整 */
  background: white;
  border-top: 1px solid #e6e6e6;
  padding: 15px 2%; /* 与卡片宽度保持一致 */
  text-align: right;
  z-index: 999;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

.section-actions {
  display: flex;
  gap: 10px;
}

.divider {
  height: 1px;
  background-color: #ebeef5;
  margin: 5px 0 15px;
}

.basic-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

.info-item {
  display: flex;
  min-height: 36px;
}


.info-label {
  width: 100px;
  color: #606266;
  font-size: 14px;
  display: flex;
  align-items: center;
}

.info-value {
  flex: 1;
  font-size: 14px;
  color: #1a1a1a;
  font-weight: 500;
  display: flex;
  align-items: center;
  padding-left: 10px;
}

.search-container {
  width: 100%;
  overflow-x: auto; /* 如果内容超出，允许横向滚动 */
}
 
.search-form {
  display: flex;
  align-items: flex-start; /* 顶部对齐 */
  flex-wrap: nowrap; /* 禁止换行 */
  gap: 15px;
  width: 100%;
}
 
.form-item {
  flex-shrink: 0; /* 禁止压缩 */
  margin-bottom: 0; /* 覆盖 Element UI 的默认 margin */
  width: 230px; /* 固定宽度 */
}
 
.form-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  padding-top: 5px; /* 调整按钮对齐 */
}
 
/* 适配小屏幕（可选） */
@media (max-width: 1200px) {
  .search-form {
    flex-wrap: wrap; /* 允许换行 */
  }
  .form-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

.full-row {
  grid-column: 1 / -1;
  display: flex;
}

.full-row .info-label {
  width: 100px;
}

.full-row .info-value {
  flex: 1;
}

.location-table-container {
  padding: 20px;
}

.base-info-card {
  width: 84.5%;
  border-radius: 10px;
  margin-left: -20px; /* 向左移动20px */
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

@media print {
  .warehouse-detail {
    padding: 0;
    background-color: #fff;
  }
  
  .basic-info-container {
    box-shadow: none;
    padding: 0;
  }
  
  .section-actions {
    display: none;
  }
}
</style>